<script setup lang="ts">
import {articleList, getCategoryList} from "@/api/article/http";
import {ref} from 'vue'
let categoryList = ref([{
    id:'-1',
    name:'全部'
}])
let detailList = ref([])
let params = ref<string>('')
function getArticle(){
    articleList(params.value).then((res)=>{
        if (res.code === 200) {
            detailList.value = res.rows
            console.log(res.rows)
        }
    })
}

getCategoryList().then((res)=>{
    res.rows.forEach((item)=>{
        categoryList.value .push(item)
    })
    getArticle()
})

let url = 'http://192.168.5.120:8090'
function onClick(tab){
    tab.name === '-1'?params.value = '':params.value = tab.name;
    console.log(tab)
    getArticle()
}
</script>

<template>
    <div class="article-list-container">
        <div class="article-list-top">
            <router-link to="/index" >
                <van-icon name="arrow-left"/>
                <span>文章</span>
            </router-link>
        </div>
        <section class="article-list-body">
            <van-tabs @click-tab="onClick">
                <van-tab v-for="item in categoryList" :key="item.id" :title="item.name" :name="item.id">
                    <van-empty description="暂时无内容~"  v-if="detailList.length === 0"/>
                    <ul class="article-list" v-else>
                        <router-link :to="{path:'/articleDetail',query:{id:item.id}}" v-for="item in detailList"  :key="item.id">
                            <li class="list-item"  >
                                <div class="list-left">
                                    <van-image
                                        width="8rem"
                                        height="5rem"
                                        fit="cover"
                                        :src="url + item.titlePicture"
                                        radius="8px"
                                    />
                                </div>
                                <div class="list-right">
                                    <p class="titText">{{ item.title }}</p>
                                    <div class="textImg">
                                        <div class="fire">
                                            <img src="../../assets/images/火苗.png" alt="" class="fireImg">
                                            <span>{{ item.readers }}人已读</span>
                                        </div>
                                        <div class="clock">
                                            <img src="../../assets/images/时钟.png" alt="" class="clockImg">
                                            <span>{{ item.sendTime }}</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </router-link>
                    </ul>
                </van-tab>
            </van-tabs>
        </section>
    </div>
</template>

<style scoped lang="less">
a {
  color:#333333;
}
.article-list-container {
    min-height: 100vh;
  background-color: #F8F8F8;
  .article-list-top {
    padding: 10px;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    background-color: white;
    span {
      margin-left: 10px;
    }
  }
    .article-list-body {
        .list-item {
            margin: auto;
            width:95%;
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            background-color: white;
            border-radius: 10px;
            height: 100px;
            overflow: hidden;

            .list-left {
                margin-top: 10px;
                margin-left: 10px;
                width: 32%;
            }
            .list-right {
                padding: 0 10px 15px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: 90%;
                box-sizing: border-box;
                .titText {
                    width: 60%;
                    /* 强制在同一行显示 */
                    white-space: nowrap;
                    /* 溢出隐藏 */
                    overflow: hidden;
                    /* 添加省略号 */
                    text-overflow: ellipsis;
                }
                .textImg {
                    width: 80%;
                    display: flex;
                    font-size: 3.2vw;
                    color: #A9B4BF;
                    white-space: nowrap;
                    .fire,
                    .clock {
                        flex: 0 0 auto; /* 不伸缩，保持原始大小 */
                        margin-right: 3%; /* 子元素之间的间距 */
                    }
                    .clock {
                        margin-top: 2px;
                        margin-left: 10px;
                    }
                    .fireImg,
                    .clockImg {
                        margin-right: 2%;
                        vertical-align: top;
                    }
                }
            }
        }
    }
}
</style>